<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<nz-table
  class="no-border small full-height"
  [nzSize]="'small'"
  [nzLoading]="isLoading"
  [nzData]="listOfTask"
  [nzScroll]="{x:'1480px',y:'calc( 100% - 35px )'}"
  [nzFrontPagination]="false"
  [nzShowPagination]="false">
  <thead (nzSortChange)="sort($event)" nzSingleSort>
    <tr>
      <th nzWidth="80px" nzLeft="0px">ID</th>
      <th nzSortKey="metrics.read-bytes" nzShowSort nzWidth="140px">Bytes Received</th>
      <th nzSortKey="metrics.read-records" nzShowSort nzWidth="150px">Records Received</th>
      <th nzSortKey="metrics.write-bytes" nzShowSort nzWidth="120px">Bytes Sent</th>
      <th nzSortKey="metrics.write-records" nzShowSort nzWidth="120px">Records Sent</th>
      <th nzSortKey="attempt" nzShowSort nzWidth="100px">Attempt</th>
      <th nzSortKey="host" nzShowSort nzWidth="200px">Host</th>
      <th nzSortKey="start_time" nzShowSort nzWidth="150px">Start Time</th>
      <th nzSortKey="duration" nzShowSort nzWidth="100px">Duration</th>
      <th nzSortKey="end-time" nzShowSort nzWidth="150px">End Time</th>
      <th nzSortKey="status" nzShowSort nzWidth="120px" nzRight="50px">Status</th>
      <th nzWidth="50px" nzRight="0px">More</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let task of listOfTask; trackBy:trackTaskBy;">
      <td nzLeft="0">
        {{ task.subtask }}
      </td>
      <td>
        <span *ngIf="task.metrics['read-bytes-complete'];else loadingTemplate">
          {{ task.metrics['read-bytes'] | humanizeBytes }}
        </span>
      </td>
      <td>
        <span *ngIf="task.metrics['read-records-complete'];else loadingTemplate">
          {{ task.metrics['read-records'] | number:'1.0-0' }}
        </span>
      </td>
      <td>
        <span *ngIf="task.metrics['write-bytes-complete'];else loadingTemplate">
          {{ task.metrics['write-bytes'] | humanizeBytes }}
        </span>
      </td>
      <td>
        <span *ngIf="task.metrics['write-records-complete'];else loadingTemplate">
          {{ task.metrics['write-records'] | number:'1.0-0' }}
        </span>
      </td>
      <td>{{ task.attempt + 1 }}</td>
      <td>{{ task.host }}</td>
      <td>{{ task["start_time"] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
      <td>{{ task.duration | humanizeDuration }}</td>
      <td>{{ task["end-time"] | humanizeDate: 'yyyy-MM-dd HH:mm:ss' }}</td>
      <td nzRight="50px">
        <flink-job-badge [state]="task.status"></flink-job-badge>
      </td>
      <td nzRight="0px">
        <span *ngIf="!task['taskmanager-id'] || task['taskmanager-id'] === '(unassigned)'; else hrefTpl">-</span>
        <ng-template #hrefTpl>
          <nz-dropdown [nzPlacement]="'bottomRight'">
            <span nz-dropdown><i nz-icon nzType="ellipsis" nzTheme="outline"></i></span>
            <ul nz-menu>
              <li nz-menu-item>
                <a [routerLink]="['/task-manager',task['taskmanager-id'],'logs']" target="_blank">View taskmanager log</a>
              </li>
            </ul>
          </nz-dropdown>
        </ng-template>
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #loadingTemplate>
  <i nz-icon type="loading"></i>
</ng-template>
